<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TNT博客中心</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="css/main.css">
    <style>

    </style>
</head>
<!--只修改mian标签内容-->
<!--这里是数据统计页面-->
<!--姓名：文德宇 -->
<body>
<div id="app">
    <el-container>
        <el-header>不动</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu @select="handleSelect" active-text-color="orange" default-active="1">
                    <img src="imgs/icon.png" style="margin-top: 10px" width="150px">
                    <el-divider></el-divider>
                    <el-menu-item index="1"><i class="el-icon-s-platform">数据统计分析</i></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-custom">管理员账号</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">管理员列表</el-menu-item>
                            <el-menu-item index="2-2">添加管理员</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="3"><i class="el-icon-user-solid"> 用户账号</i></el-menu-item>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-video-camera"> 轮播图管理</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1">轮播图列表</el-menu-item>
                            <el-menu-item index="4-2">添加轮播图</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-promotion"> 文章管理</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1">文章列表</el-menu-item>
                            <el-menu-item index="5-2">发布文章</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-chat-line-round"> 评论管理</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="6-1">管理员评论</el-menu-item>
                            <el-menu-item index="6-2">用户评论</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="7"><i class="el-icon-setting"> 个人设置</i></el-menu-item>
                </el-menu>
            </el-aside>
            <!--只修改main标签内容-->
            <el-main>
                <el-card style="height: 500px;">

                <el-row gutter="20">
                        <h1 style="margin-bottom: 30px; color: orange">数据统计</h1>
                        <el-col span="12">
                            <div id="main_1" style="height: 400px;width: 100%"></div>
                        </el-col>
                        <el-col span="12">
                            <div id="main_2" style="height: 400px;width: 100%"></div>
                        </el-col>

                </el-row>
                </el-card>
                <el-card style="height: 500px">

                <el-row gutter="20">
                        <el-col span="12">
                            <div id="main_3" style="height: 400px;width: 100%"></div>
                        </el-col>
                        <el-divider></el-divider>
                        <el-col span="12">
                            <div id="main_4" style="height: 400px;width: 100%"></div>
                        </el-col>
                </el-row>
                </el-card>

            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script src="js/index/echarts.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>

    let v = new Vue({
        el: "#app",
        data: function () {
            return {
                currentIndex: "1",
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                v.currentIndex = key;
                console.log(key);
            }
        },
        mounted(){
            // console.log(echarts)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('main_3'));
            let myChart2 = echarts.init(document.getElementById('main_2'));
            let myChart3 = echarts.init(document.getElementById('main_1'));
            let myChart4 = echarts.init(document.getElementById('main_4'));

            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '近15日浏览量统计'
                },
                xAxis: {
                    type: 'category',
                    data: ['15日', '14日', '13日', '12日', '11日', '10日', '9日', '8日', '7日', '6日', '5日', '4日', '前天', '昨天', '今天']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }
                ]
            };
            let option2 = {
                title: {
                    text: '近15日发布量统计'
                },
                xAxis: {
                    type: 'category',
                    data: ['15日', '14日', '13日', '12日', '11日', '10日', '9日', '8日', '7日', '6日', '5日', '4日', '前天', '昨天', '今天']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [1000, 1429, 1858, 2287, 2716, 3145, 3574, 4003, 4432, 4861, 5290, 5719, 6148, 6577],
                        type: 'line'
                    }
                ]
            };
            let option3 = {
                title: {
                    text: '2023年用户量统计'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['用户量','增长速率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [ 'Jan',   'Feb', 'Mar',  'Apr', 'May', 'Jun', 'Jul','Aug', 'Sep','Oct','Nov','Dec' ],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '用户量',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    {
                        type: 'value',
                        name: '增长速率',
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '用户量',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 人';
                            }
                        },
                        data: [
                            2, 4, 7, 23, 25, 76, 135, 162, 200, 270, 280,290
                        ]


                    },
                    {
                        name: '增长速率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' %';
                            }
                        },
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            };
            let option4 = {
                title: {
                    text: '打赏统计',
                    // left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    left: 'center',
                    top: 'bottom',
                    data: [
                        'rose1',
                        'rose2',
                        'rose3',
                        'rose4',
                        'rose5',
                        'rose6',
                        'rose7',
                        'rose8'
                    ]
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                        name: '打赏金额段占比',
                        type: 'pie',
                        radius: [20, 100],
                        center: ['25%', '50%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 5
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        data: [
                            { value: 40, name: '0-5元' },
                            { value: 33, name: '5-10' },
                            { value: 28, name: '10-20' },
                            { value: 22, name: '20-50' },
                            { value: 20, name: '50-100' },
                            { value: 15, name: '100-200' },
                            { value: 12, name: '200-500' },
                            { value: 10, name: '大于500' }
                        ]
                    },
                    {
                        name: '打赏次数占比',
                        type: 'pie',
                        radius: [20, 100],
                        center: ['75%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 5
                        },
                        data: [
                            { value: 30, name: '0次' },
                            { value: 28, name: '1-5次' },
                            { value: 26, name: '5-10次' },
                            { value: 24, name: '10-25次' },
                            { value: 22, name: '25-60次' },
                            { value: 20, name: '60-100次' },
                            { value: 18, name: '100-200次' },
                            { value: 16, name: '大于200次' }
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
            myChart4.setOption(option4);
        }
    });

</script>
</html>